web前端性能优化

前言

性能优化是每个项目都需要注意的问题，在这里结合项目实际情况较为系统的整理下

web前端性能优化简单可以概括为以下几点

1 减少需要加载资源的体积

1.1 按需加载

就是每个页面之加载需要的内容，这一点在多页应用中一般都有注意，单页应用可以用webpack的import与vue的异步组件实现；react由于本人不熟，肯定也有相应的解决方案

1.2 资源压缩

在目前的webpack4+中，只要将mode设置为production，webpack就会将对应的资源（html、css、js）进行压缩；gulp也有对应的模块（html-min,uglify）

1.3 懒加载

将首屏不需要展示内容做懒加载处理，在需要展示时（比如滚动屏幕）再加载需要的内容

2 加快加载的速度

2.1 css精灵图

这是一种比较常用的技术，就是jiang将页面需要展示的小图片图标集中到一整张图片中，通过background-position设置来展示，原理是由于浏览器对同一域名下的请求有并发个数限制（一般在4-10个）

2.2 cdn加速

cdn原理简单来说就是通过dns的负载均衡，将访问解析到最近的服务器，该服务器首次会到目标服务器加载内容，同时会缓存该内容，此后该地区访问此资源的时候就能直接读取服务器上的缓存内容；从而块加载的速度；同时还可以突破浏览器的并发个数限制于服务器的带宽限制

3 http协议相关(需要对服务器软件进行相应配置)

3.1 缓存

3.1.1 Last-Modified(http1.0)与ETag(http1.1)，浏览器会对响应头中有此两个字段的内容进行缓存，下次访问此资源的时候会带上f-Modified-Since(与Last-Modified相对应)If-None-Match(与ETag相对应);服务器在识别到文件没有变化的时候，会返回状态码304,同时也不会返回响应体；浏览器接收到服务器返回的内容后就会从缓存中读取相应内容；
关于为什么会有两个字段，http1.0与http1.1各一个，因为http1.0中的约定会有服务器于客户端时间不一致的情况；下同

3.1.2 Expires（http1.0）与Cache-Control: max-age=86400（http1.1），此个字段与3.1.1类似，不同的是浏览器读到对应缓存后，如果没过期，就不会请求服务器，直接使用缓存里的内容

3.1.3 keep-alive，与tcp协议的三次握手相关，有此字段将会保持tcp链接，省去再次握手的过程；保持的时间可通过服务器软件进行配置

3.1.4 Accept-Encoding，这个需要浏览器处理

4 浏览器相关

4.1 defer与async

由于script会阻塞浏览器对html的解析，对与没有依赖关系的script加上defer或async

4.2 图片用背景图的形式展示

此方法是由于img标签会阻塞html的解析

结语

性能优化认证道远，目前只想到这些，算是抛砖引玉了，有没涉及到或者错误之处请大佬们不吝指正，谢谢~~